<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>复杂表单</title>
    <link rel="stylesheet" href="../../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../../assets/module/admin.css?v=311"/>
    <style>
        .layui-form-item {
            margin-bottom: 0;
            margin-top: 20px;
        }

        .layui-form-item .layui-inline {
            margin-bottom: 25px;
            margin-right: 0;
        }
    </style>
</head>

<body>

<!-- 加载动画，移除位置在common.js中 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">仓库信息</div>
        <div class="layui-card-body">
            <div class="layui-form">
                <div class="layui-form-item layui-row">
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">仓库名:</label>
                        <div class="layui-input-block">
                            <input name="ckName" type="text" placeholder="请输入仓库名称" class="layui-input"/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">仓库域名:</label>
                        <div class="layui-input-block">
                            <input name="ckYm" type="text" placeholder="请输入" class="layui-input"/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">仓库管理员</label>
                        <div class="layui-input-block">
                            <select name="ckGly">
                                <option value="">请选择管理员</option>
                                <option value="0">付晓晓</option>
                                <option value="1">周毛毛</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">审批人</label>
                        <div class="layui-input-block">
                            <select name="spPerson">
                                <option value="">请选择审批人</option>
                                <option value="0">付晓晓</option>
                                <option value="1">周毛毛</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">生效日期:</label>
                        <div class="layui-input-block">
                            <input id="dateRange01" name="sxTime" type="text" placeholder="请选择开始和结束日期"
                                   class="layui-input date-icon"/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">仓库类型</label>
                        <div class="layui-input-block">
                            <select name="ckType">
                                <option value="">请选择仓库类型</option>
                                <option value="0">私密</option>
                                <option value="1">公开</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="layui-card">
        <div class="layui-card-header">任务信息</div>
        <div class="layui-card-body">

            <div class="layui-form">
                <div class="layui-form-item layui-row">
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">任务名:</label>
                        <div class="layui-input-block">
                            <input name="rwName" type="text" placeholder="请输入" class="layui-input"/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">任务描述:</label>
                        <div class="layui-input-block">
                            <input name="rwDesc" type="text" placeholder="请输入" class="layui-input"/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">执行人</label>
                        <div class="layui-input-block">
                            <select name="zxPerson">
                                <option value="">请选择执行人</option>
                                <option value="0">付晓晓</option>
                                <option value="1">周毛毛</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">责任人</label>
                        <div class="layui-input-block">
                            <select name="zrPerson">
                                <option value="">请选择责任人</option>
                                <option value="0">付晓晓</option>
                                <option value="1">周毛毛</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">提醒时间:</label>
                        <div class="layui-input-block">
                            <input id="dateRange02" name="txTime" type="text" placeholder="请选择提醒时间"
                                   class="layui-input date-icon"/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">任务类型</label>
                        <div class="layui-input-block">
                            <select name="rwType">
                                <option value="">请选择任务类型</option>
                                <option value="0">私密</option>
                                <option value="1">公开</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="layui-card">
        <div class="layui-card-header">选择成员</div>
        <div class="layui-card-body">

            <table class="layui-table" id="user-table" lay-filter="user-table"></table>

            <div style="text-align: center;margin-top: 30px;margin-bottom: 20px;">
                <button id="btnSubmit" type="button" class="layui-btn">&emsp;提交&emsp;</button>
                <button type="button" class="layui-btn layui-btn-primary">&emsp;重置&emsp;</button>
            </div>

        </div>
    </div>
</div>

<!-- js部分 -->
<script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../../assets/js/common.js?v=311"></script>

<script>
    layui.use(['layer', 'form', 'table', 'util', 'laydate'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var laydate = layui.laydate;

        // 渲染表格
        table.render({
            elem: '#user-table',
            url: '../../../json/user.json',
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'checkbox'},
                {field: 'username', align: 'center', sort: true, title: '账号'},
                {field: 'nickName', align: 'center', sort: true, title: '用户名'},
                {field: 'phone', align: 'center', sort: true, title: '手机号'},
                {field: 'sex', align: 'center', sort: true, title: '性别'},
                {
                    sort: true, align: 'center', templet: function (d) {
                        return util.toDateString(d.createTime);
                    }, title: '创建时间'
                }
            ]]
        });

        // 渲染laydate
        laydate.render({
            elem: '#dateRange01',
            range: true
        });

        laydate.render({
            elem: '#dateRange02'
        });

        // 提交按钮
        $('#btnSubmit').click(function () {
            var filed = new Object();
            var isVer = true;
            $('input').each(function (one) {
                var $that = $(this);
                var name = $that.attr('name');
                var val = $that.val();
                if (!val) {
                    $('html,.layui-fluid').animate({
                        scrollTop: $that.offset().top - 150
                    }, 100, function () {
                        layer.tips('必填项不能为空', $that, {
                            tips: [2, '#ff4c4c']
                        });
                    });
                    isVer = false;
                    return false;
                }
                filed[name] = val;
            });
            if (isVer) {
                layer.msg(JSON.stringify(filed));
            }
        });
    });
</script>
</body>

</html>